import React, {useEffect, useState} from 'react'
import Taro from '@tarojs/taro'
import {View, Text, Input} from '@tarojs/components'
// import Tabber, {TabListItem, useTabbar} from '@/components/Tabbar/Tabber'
import Nav from '@/components/Nav/Nav'
import GridLayer, {GridLayerItem} from '@/components/GridLayer/GridLayer'
import bus from '@packageB/images/bus.png'
import text from '@packageB/images/text.png'
import slow from '@packageB/images/slow.png'
import fast from '@packageB/images/fast.png'
import TravelMap, {Location} from '@/packageB/components/TravelMap/TravelMap'
import {useFlex} from '@/packageB/Hooks/travel'
import './Travel.scss'

// const tabList: TabListItem[] = [
//   {
//     id: 1,
//     title: '主页'
//   }, {
//     id: 2,
//     title: '附近'
//   }
// ]

const gridList: GridLayerItem[] = [
  {
    iconfont: text,
    url: '',
    desc: '出租'
  },
  {
    iconfont: bus,
    url: '',
    desc: '公交车'
  },
  {
    iconfont: slow,
    url: '',
    desc: '自行车'
  },
  {
    iconfont: fast,
    url: '',
    desc: '地铁'
  }
]

const Travel: React.FC = () => {
  // const {curId, onchange} = useTabbar({curIndex : 1})
  const [location, setLocation] = useState<Location>({
    longitude: 116.3,  // 默认为北京经纬度
    latitude: 39.9
  })
  const {onclickBtn, styled} = useFlex()
  const [startPoint] = useState('')
  const [endPoint] = useState('')

  function onInput (e, position: string) {
    console.log(e, position)
  }



  useEffect(() => {
    Taro.getLocation({
      type: 'wgs84',
      success (res) {
        setLocation(res)
      },
      fail (err) {
        Taro.showToast({
          title: err.errMsg
        })
      }
    })
  }, [])

  function onclick (url: string) {
    console.log(url)
  }


  return <View>
    <Nav text='平遥古城出行' color='#000' />
    <View className='placeholder' />
    <View className='map_wrap'>
      <TravelMap location={location} />
    </View>
    <View className='travel_wrap'
      style={styled}
    >
      <View className='travel_wrap_btn'
        onClick={onclickBtn}
      />
      <View className='travel_box'>
        <Text className='travel_box_dot' />
        <Input className='travel_box_input'
          placeholder='请输入起点'
          value={startPoint}
          onInput={(e) => onInput(e, 'start')}
        />
      </View>
      <View className='travel_box'>
        <Text className='travel_box_dot' />
        <Input className='travel_box_input'
          placeholder='平遥古城'
          value={endPoint}
          onInput={(e) => onInput(e, 'start')}
        />
      </View>
      <View style='width: 100%'>
        <GridLayer grids={gridList} onclick={onclick} />
      </View>
    </View>
    {/*<Tabber tabList={tabList} curIndex={curId} onchange={onchange} />*/}
  </View>
}

export default Travel
